<template>
  <div>
    <tableHeader />
    <!-- 巡检任务详情模块 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>巡检任务详情</span>
        </div>
      </template>
      <el-row :gutter="0" style="display: flex">
        <!-- 基础信息 -->
        <el-col :span="24">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="计划名称">
              {{ line.single.planName }}</el-descriptions-item
            >
            <el-descriptions-item label="任务状态">
              <el-tag size="small" :type="itemstate">{{
                line.single.state === 0
                  ? "待执行"
                  : line.single.state === 1
                  ? "执行中"
                  : line.single.state === 2
                  ? "已完成"
                  : "过期未检"
              }}</el-tag></el-descriptions-item
            >
            <el-descriptions-item label="计划开始时间">
              {{ line.single.startTime }}</el-descriptions-item
            >
            <el-descriptions-item label="巡检人员名称">
              {{ line.single.employeeName }}</el-descriptions-item
            >
            <el-descriptions-item label="任务开始时间">
              {{ getTime(line.single.startTime) }}</el-descriptions-item
            >
            <el-descriptions-item label="任务结束时间">
              {{ getTime(line.single.endTime) }}</el-descriptions-item
            >
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <!-- 巡检设备 -->
    <DeviceAndStandard />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted, computed } from "vue";
import tableHeader from "./tableHeader.vue";
import { useLineCruiseTask } from "@/store/backend/LineCruiseM/task";
import DeviceAndStandard from "./DeviceAndStandard.vue";
import { useNavTabs } from "@/store/navTabs";
import { useRoute } from "vue-router";

const line = useLineCruiseTask();
const navTabs = useNavTabs();
const route = useRoute();

//设备状态etag样式
const itemstate = computed<string>(() => {
  switch (line.single.state) {
    case 0:
      return "info";
    case 1:
      return "warning";
    case 2:
      return "success";
    default:
      return "danger";
  }
});

//将任务时间过滤出来
const getTime = (date: string) => {
  return date.split(" ")[1];
};

provide("navTabs", navTabs);
</script>
<style lang="scss" scoped></style>
